<template>
  <div class="modal-wrapper">
    <!-- 主要内容区域 -->
    <div class="modal-content">
      <h2 class="title">{{ message?.title || '活动通知' }}</h2>
      <p class="text">
        {{ message?.subtitle || '恭喜获得20个租币，请查收。为了感谢其长久以来的陪伴，这里的文字请忽略。活动期间每天 11 点还会上线限量礼包，数量有限先到先得，用户们千万不要错过！' }}
      </p>

      <!-- 中间的活动横幅 -->
      <div class="banner">
        <div class="banner-text-content">
          <span class="free-draw">免费抽</span>
          <span class="product-name">iPhone11 Pro</span>
          <button class="draw-button">我要抽 ></button>
        </div>
        <!-- 提示：实际项目中，手机和金币图片会用 <img> 标签或背景图定位在这里 -->
      </div>

      <h3 class="subtitle">小标题</h3>
      <p class="text">此外，对于所有有贡献的用户。</p>
    </div>
    <!-- 底部按钮区域 -->
    <div class="modal-footer">
      <button class="footer-button delete-button" @click="handleDelete">删除</button>
      <button class="footer-button confirm-button" @click="handleConfirm">确定</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Message } from '../data';

defineProps<{
  message?: Message;
}>();

const emit = defineEmits<{
  confirm: [];
  delete: [];
}>();

// 处理确定按钮点击事件（标记为已读）
const handleConfirm = () => {
  emit('confirm');
};

// 处理删除按钮点击事件
const handleDelete = () => {
  emit('delete');
};
</script>

<style lang="scss" scoped>
/* 使用简单的类选择器，避免深层嵌套 */

/* 内容区域的内边距 */
.modal-content {
  padding: 24px;
}

/* 大标题 "活动通知" */
.title {
  margin: 0 0 5px 0;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 19px;
  color: #333333;
  line-height: 19px;
  font-style: normal;
}

/* 小标题 "小标题" */
.subtitle {
  font-family: PingFangSC, PingFang SC;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  margin: 20px 0 8px 0;
}

/* 所有段落文字 */
.text {
  font-size: 14px;
  color: #888;
  line-height: 1.6;
  margin: 0;
}

/* 红色渐变活动横幅 */
.banner {
  margin-top: 20px;
  padding: 20px;
  border-radius: 8px;
  background-image: linear-gradient(100deg, #ff7a6e, #ff5a79);
  color: white;
  position: relative;
}

/* 横幅内的文字容器 */
.banner-text-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* "免费抽" */
.free-draw {
  font-size: 32px;
  font-weight: bold;
  line-height: 1.2;
}

/* "iPhone11 Pro" */
.product-name {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 4px;
}

/* "我要抽" 按钮 */
.draw-button {
  background-color: white;
  color: #ff5a79;
  /* 颜色与渐变色呼应 */
  border: none;
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: bold;
  margin-top: 16px;
  cursor: pointer;
}

/* 底部操作栏容器 */
.modal-footer {
  display: flex;
  width: 100%;
  border-top: 1px solid #f0f0f0;
}

/* 底部按钮通用样式 */
.footer-button {
  padding: 15px 0;
  border: none;
  background-color: transparent;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

/* "删除" 按钮 */
.delete-button {
  width: 31%;
  color: #999;
  background-color: #fafafa;
  border-right: 1px solid #f0f0f0;
  /* 中间的分割线 */
}

/* "确定" 按钮 */
.confirm-button {
  flex: 1;
  color: white;
  background-color: #00c7a9;
  /* 主题色 */
}
</style>